

    import * as React from 'react';
    import * as ReactDOM from 'react-dom';
    import * as Reflux from 'reflux';

    var ajax = require("./select-reflux.js");


    var LIST_SELECT = React.createClass({
        //mixins: [Reflux.connect(SelectStore,'dataResult')],
        propTypes: {
            name: React.PropTypes.string.isRequired,
            url: React.PropTypes.string.isRequired
        },
        getDefaultProps: function () {
            return {
                value: null,
                keyName: "",
                isAuto: true,
                valuekey: "name",
                showName: "name",
                isClear:false

            };
        },
        getInitialState: function () {
            return {value: '', listShow: false, dataResult: false, isClick: false, item: {}, isLoad: false}
        },
        componentWillMount: function () {
            var temp = ajax.init();
            this.setState({
                value: this.props.placeholder
            })
            this.SelectActions = temp.SelectActions;
            this.SelectStore = temp.SelectStore;
            this.unsubscribe = this.SelectStore.listen(this.onStatusChange);
            this.props.isAuto && this.SelectActions.get(this.props.url, "");
        },
        onStatusChange: function (result) {
            //console.log("&&&&&&&&&&&&&&&&&&&&&&&&&&" + JSON.stringify(result));

            var items = result.result, item = {}, selectItem = false, state = {};

            for (var i = 0; i < items.length; i++) {
                item = items[i];
                //console.log(this.props.valuekey);
                if (item[this.props.valuekey] != undefined && item[this.props.valuekey] == this.props.defaultValue) {
                    selectItem = item;
                }
            }
            if (!selectItem) {
                selectItem = "";
            }
            //console.log(this.props.defaultValue + " select say :" + JSON.stringify(selectItem));
            this.getValue(selectItem);
            this.props.handleBlur(this.state.item);
            //this.props.isAuto||state
            //&&state.
            this.setState({"dataResult": result, "isLoad": true});
            this.props.isAuto || this.handleClick();

        },
        componentDidMount: function () {

        },
        componentWillUnmount: function () {
            this.unsubscribe();
        },

        handleChange: function (event) {
            //this.setState({value: event.target.value.substr(0, 140)});
            //console.log("fuck")
        },
        handleClick: function () {
            //this.refs.myinput.focus();
            //console.log("hahaha" + JSON.stringify(this.props.children))

            if (!this.props.isAuto && !this.state.isLoad) {
                this.SelectActions.get(this.props.url, "");
            } else {
                this.setState({listShow: !this.state.listShow, isClick: true})
            }
            //this.props.isAuto&&SelectActions.get(this.props.url,"");
            //this.setState({listShow:!this.state.listShow,isClick:true})


        },
        getValue: function (item) {
            //console.log("点击值:" + JSON.stringify(item));
            this.setState({value: item.name, listShow: false, isClick: false, "item": item});
            //if (this.props.valuekey) {
                this.props.setFormValue({"name": this.props.name, "value": this.props.valuekey?(item[this.props.valuekey]):item});
            /*} else {
                this.props.setFormValue({"name": this.props.name, "value": item});
            }*/

            //this.setState({listShow:false,isClick:false})
        },
        setAll:function(){
            console.info("55555555555555555555555555555+++++++++++++++++++++++")
             this.setState({value: "所有", listShow: false, isClick: false, "item": ""});
            this.props.setFormValue({"name": this.props.name, "value": ""});
        },
        handleBlur: function () {
            if (this.state.isClick) {
                this.props.handleBlur(this.state.item);
                this.setState({listShow: false, isClick: false})
            }
            // //console.log("鼠标移出 select"+this.state.value);
        },
        render: function () {
            var value = this.state.value, $Li = [], item, selectItem;
            var items = this.state.dataResult.result ? this.state.dataResult.result : false;
            return (
                <div className="virtual-select" onClick={this.handleClick} onMouseLeave={this.handleBlur}>
                    <input type="text" className="input input-normal" value={value} onChange={this.handleChange}/>
                    <label className="icon icon-select">&nbsp;&nbsp;</label>
                    <div className={this.state.listShow?"container-form-select":"hide"}>
                        <div className="temp">
                            <Lis setAll={this.setAll} isClear={this.props.isClear} onGetValue={this.getValue} items={items} defaultShow="没有查询到数据" defaultValue={this.props.defaultValue}> </Lis>
                        </div>
                    </div>
                </div>
            )
        }
    });

    /*     for(var i = 0 ;i<items.length;i++){
     item = items[i];
     if(item[this.props.valuekey]){
     this.getValue(item);
     $Li.push(<Li onGetValue={this.getValue}  item={item} isSelect={true} key={i}/>)
     }else{
     $Li.push(<Li onGetValue={this.getValue}  item={item} key={i} />)
     }

     }
     if(items.length<1){
     item[this.props.valuekey] = "";
     item["name"] = "没有查询到数据";
     $Li.push(<Li onGetValue={this.getValue}  item={item} isSelect={true} key={i}/>)
     }
     */

    var Li = React.createClass({
        handleClick: function (item) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);
        },
        render: function () {
            var item = this.props.item;
            return (
                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
            );
        }
    })
    //defaultValue
    var Lis = React.createClass({
        componentWillMount: function () {

            //if(this.props.defaultValue)
        },
        handleClick: function (item) {
            //console.log(JSON.stringify(item))
            this.props.onGetValue(item);
        },
        setAll:function(){
            this.props.setAll();
        },
        render: function () {
            if (!this.props.items) {
                return (
                    <ul>
                        <li>{this.props.defaultShow || "无"}</li>
                    </ul>
                )
            }
            return (
                <ul>
                    {(() => {
                        if(this.props.isClear){
                            return (
                                <li onClick={this.setAll}>所有</li>
                            )
                        }
                    })()}
                    {
                        this.props.items.map(function (item, i) {
                            return (
                                <li key={i} onClick={this.handleClick.bind(this,item)}>{item.name}</li>
                            );
                        }, this)
                    }
                </ul>

            )
        }

    })
    module.exports =  {
        Lis: Lis,
        LIST_SELECT: LIST_SELECT
    }

